import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import axios from "axios";
import { NavBar, Space, Toast } from 'antd-mobile'
import { CloseOutline, MoreOutline, SearchOutline } from 'antd-mobile-icons'
import './couponDetail.css'
export default function couponDetail() {
    const location = useLocation()
    const navigate = useNavigate()
    const id = location.state
    const [coupon, setcoupon] = useState(null)

    const getCouponDetail = async () => {
        let res = await axios.get(`http://localhost:3000/ycf/getCouponDetail?_id=${id}`)
        if (res.data.code == 200) {
            setcoupon(res.data.data[0])
            console.log(res.data.data[0].type.store)
        }
    }

    const generateRandomString = (length = 8) => {  
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';  
        let result = '';  

        for (let i = 0; i < length; i++) {  
            const randomIndex = Math.floor(Math.random() * characters.length);  
            result += characters[randomIndex];  
        }  

        return result;  
    };  



   

    useEffect(() => {
        getCouponDetail()
    }, [id])

    const back = () => {
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,
        })
        navigate(-1)
        
    }

    return (  
        <div className="couponDetail-box">  
            <div className="couponDetail-title">  
                <NavBar onBack={back}>代金卷详情</NavBar>  
            </div>  
            <div className="couponDetail-content">  
                {coupon ? ( // 检查 coupon 是否可用  
                    <>  
                        <div className="coupon-text">  
                            <p style={{marginTop:20,marginLeft:10,fontSize:18}}>{coupon.type?.store || "未知商店"}</p> {/* 使用可选链访问 */}  
                            <h2 style={{ fontSize: 26, color: "red",marginTop:50,marginLeft:10 }}>{coupon.title}</h2>  
                        </div>  
                        <div className="coupon-text-1">  
                            <p style={{marginLeft:20,color:"white",fontSize:16}}>随时退|免预约|过期自动退|可叠加</p>  
                        </div>  
                        <div className="coupon-text-2">  
                            <h2 style={{ fontSize: 26, color: "white",marginLeft:20 }}>购买须知</h2>  
                        </div>  
                    </>  
                ) : (  
                    <p>加载中...</p> // 加载状态  
                )}  
            </div>  
            <div className="couponDetail-footer">  
                {coupon && ( // 确保 coupon 可用再渲染价格  
                    <>  
                        <h2 style={{ fontSize: 28, color: "red", fontWeight: 300 }}>￥{coupon.endPrice}</h2>  
                        <button  
                            className="coupon-button"  
                            onClick={() => {  
                                navigate('/payment', { state: coupon });  
                            }}  
                        >立即选购</button>  
                    </>  
                )}  
            </div>  
        </div>  
    );
}